<template>
  <Echart :height="height" width="100%" :options="options" @handleClick="handleClick" />
</template>

<script>
import Echart from '@/components/Echart/index'
import resize from '@/utils/resize'
export default {
  components: { Echart },
  mixins: [resize],
  props: {
    cdata: {
      type: Object,
      default() {
        return {}
      }
    },
    height: {
      type: String,
      default() {
        return '100%'
      }
    }
  },
  data() {
    return {
      chart: null,
      options: {
        title: {
          show: false,
          text: 'Disk Usage',
          left: 'center'
        },
        legend: {
          show: false
        },
        color: ['#28afb0', '#5b39a0', '#5ab1ef'],
        tooltip: {},
        series: [
          {
            name: '行为标签',
            type: 'treemap',
            left: 0,
            right: 0,
            top: 0,
            bottom: '10%',
            label: {
              show: true,
              formatter: '{b}'
            },
            upperLabel: {
              show: false,
              color: '#000',
              fontWeight: 'bold',
              height: 20,
              position: 'inside'
            },
            emphasis: {
              focus: 'series',
              blurScope: 'coordinateSystem',
              upperLabel: {
                color: '#999',
                position: 'inside'
              }
            },
            itemStyle: {
              borderColor: '#fff'
            },
            levels: this.getLevelOption(),
            data: []
          }
        ]
      }
    }
  },
  methods: {
    handleClick(data) {
      this.$emit('handleClick', data)
    },
    getLevelOption() {
      return [
        {
          itemStyle: {
            borderWidth: 0,
            gapWidth: 5
          }
        },
        {
          itemStyle: {
            gapWidth: 1
          }
        },
        {
          colorSaturation: [0.35, 0.5],
          itemStyle: {
            gapWidth: 1,
            borderColorSaturation: 0.6
          }
        }
      ]
    },
    setOption(obj) {
      this.options.series[0].data = obj.data
    }
  }
}
</script>
